<template>
    <div class="home">
        <div class="top_nav">
            <div class="search">
                <van-search v-model="value" @focus="focus" shape="round" />
                <van-swipe
                    class="my-swipe"
                    vertical
                    :autoplay="3000"
                    indicator-color="white"
                    @change="placeChange"
                    v-show="!isfocus"
                >
                    <van-swipe-item
                        v-for="item in SearchSwipe"
                        :key="item.season_id"
                        @click.stop="focus"
                    >
                        {{ item.title }}
                    </van-swipe-item>
                </van-swipe>
            </div>
            <van-tabs v-model="active" animated>
                <van-tab title="热门" v-if="hotBanner" class="hot">
                    <div v-if="todayHot">
                        <swiper :options="swiperOptions" class="swiper">
                            <swiper-slide v-for="b in hotBanner" :key="b.image_url">
                                <router-link
                                    :to="
                                        b.jump_url
                                            .split('bilicomic:/')[1]
                                            .replace('detail', 'details')
                                    "
                                    tag="div"
                                    class="banner-item"
                                >
                                    <van-image
                                        width="46vw"
                                        height="61.3vw"
                                        radius="5px"
                                        lazy-load
                                        fit="cover"
                                        :src="`${b.image_url}@300w.jpg`"
                                    />
                                </router-link>
                            </swiper-slide>
                        </swiper>
                        <div class="hot_content" v-if="todayHot.length">
                            <type-three
                                :todayHot="todayHot[0]"
                                :typeThreeID="typeThreeID[0]"
                                :typeThree="typeThree[0]"
                            ></type-three>

                            <type-seven
                                :todayHot="todayHot[1]"
                                :typeSeven="typeSeven[0]"
                            ></type-seven>

                            <type-three
                                :todayHot="todayHot[2]"
                                :typeThreeID="typeThreeID[1]"
                                :typeThree="typeThree[1]"
                            ></type-three>

                            <type-eight :todayHot="todayHot[3]" :typeEight="typeEight"></type-eight>

                            <type-seven
                                :todayHot="todayHot[4]"
                                :typeSeven="typeSeven[1]"
                            ></type-seven>

                            <type-three
                                :todayHot="todayHot[5]"
                                :typeThreeID="typeThreeID[2]"
                                :typeThree="typeThree[2]"
                            ></type-three>

                            <type-three
                                :todayHot="todayHot[6]"
                                :typeThreeID="typeThreeID[3]"
                                :typeThree="typeThree[3]"
                            ></type-three>

                            <type-three
                                :todayHot="todayHot[7]"
                                :typeThreeID="typeThreeID[4]"
                                :typeThree="typeThree[4]"
                            ></type-three>

                            <type-three
                                :todayHot="todayHot[8]"
                                :typeThreeID="typeThreeID[5]"
                                :typeThree="typeThree[5]"
                            ></type-three>

                            <type-three
                                :todayHot="todayHot[9]"
                                :typeThreeID="typeThreeID[6]"
                                :typeThree="typeThree[6]"
                            ></type-three>
                            <type-three
                                :todayHot="todayHot[10]"
                                :typeThreeID="typeThreeID[7]"
                                :typeThree="typeThree[7]"
                            ></type-three>
                            <type-three
                                :todayHot="todayHot[11]"
                                :typeThreeID="typeThreeID[8]"
                                :typeThree="typeThree[8]"
                            ></type-three>
                            <type-three
                                :todayHot="todayHot[12]"
                                :typeThreeID="typeThreeID[9]"
                                :typeThree="typeThree[9]"
                            ></type-three>
                            <type-three
                                :todayHot="todayHot[13]"
                                :typeThreeID="typeThreeID[10]"
                                :typeThree="typeThree[10]"
                            ></type-three>
                            <type-three
                                :todayHot="todayHot[14]"
                                :typeThreeID="typeThreeID[11]"
                                :typeThree="typeThree[11]"
                            ></type-three>

                            <type-seven
                                :todayHot="todayHot[15]"
                                :typeSeven="typeSeven[2]"
                            ></type-seven>

                            <type-three
                                :todayHot="todayHot[16]"
                                :typeThreeID="typeThreeID[12]"
                                :typeThree="typeThree[12]"
                            ></type-three>
                            <type-three
                                :todayHot="todayHot[17]"
                                :typeThreeID="typeThreeID[13]"
                                :typeThree="typeThree[13]"
                            ></type-three>
                            <type-three
                                :todayHot="todayHot[18]"
                                :typeThreeID="typeThreeID[14]"
                                :typeThree="typeThree[14]"
                            ></type-three>
                        </div>
                        <div class="more" v-if="ismore">没有更多啦~</div>
                    </div>
                    <van-loading v-else size="24px" vertical text-color="#0094ff" color="#0094ff"
                        >加载中...</van-loading
                    >
                </van-tab>
                <van-tab title="推荐" class="recommend">
                    <div class="swipe">
                        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                            <van-swipe-item v-for="banner in bannerlist" :key="banner.id">
                                <van-image
                                    width="91.5vw"
                                    height="45.6vw"
                                    lazy-load
                                    fit="cover"
                                    :src="`${banner.img}@300w.jpg`"
                                />
                            </van-swipe-item>
                        </van-swipe>
                    </div>
                    <div class="nav">
                        <router-link to="/ranking">
                            <img src="../assets/images/paihang.png" alt="" />
                            排行
                        </router-link>
                        <div>
                            <img src="../assets/images/huixingshe.png" alt="" />
                            绘星社
                        </div>
                        <div>
                            <img src="../assets/images/huodong.png" alt="" />
                            活动中心
                        </div>
                        <router-link to="/feed">
                            <img src="../assets/images/feeds.png" alt="" />
                            免费
                        </router-link>
                    </div>
                    <home-recommend></home-recommend>
                </van-tab>
                <van-tab title="男生">
                    <man-list></man-list>
                </van-tab>
                <van-tab title="女生">
                    <woman-list></woman-list>
                </van-tab>
                <van-tab title="有声漫">
                    <sound-cartoon></sound-cartoon>
                </van-tab>
                <van-tab title="正能量">
                    <positive-energy></positive-energy>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import HomeRecommend from "@/components/HomeRecommend.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import ManList from "@/components/manList.vue";
import WomanList from "@/components/womanList.vue";
import TypeThree from "@/components/typeThree.vue";
import TypeSeven from "@/components/typeSeven..vue";
import TypeEight from "@/components/typeEight.vue";
import SoundCartoon from "@/components/soundCartoon.vue";
import PositiveEnergy from "@/components/PositiveEnergy.vue";
import router from "@/router";
export default {
    name: "HomeView",
    components: {
        HomeRecommend,
        Swiper,
        SwiperSlide,
        ManList,
        WomanList,
        TypeThree,
        TypeSeven,
        TypeEight,
        SoundCartoon,
        PositiveEnergy,
    },
    data() {
        return {
            hotBanner: [], //热门banner
            bannerlist: [], //推荐banner
            todayHot: [], // 今日热门速递
            typeThree: [],
            typeThreeID: [],
            typeSeven: [],
            typeEight: [],
            SearchSwipe: [], //搜索文字轮播
            currentSwipe: "", //默认第一条数据
            isfocus: false, // 是否焦距
            value: "", //输入框的值
            season_id: "", //输入框内容的id
            active: 1,
            pageNum: "",
            loading: false,
            ismore: false,
            swiperOptions: {
                //swiper轮播图配置
                speed: 2000,
                autoplay: {
                    delay: 0,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                slidesPerView: 2,
                spaceBetween: 30,
                centeredSlides: true,
                pauseOnMouseEnter: true,
                parallax: true,
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            },
        };
    },
    created() {
        this.getbannerlist();
        this.gettodayHot();
        this.getSearchSwipe();
    },

    methods: {
        async getbannerlist() {
            await this.axios.get("Banner").then((res) => {
                this.bannerlist = res;
            });
        },
        async gethotBanner(id) {
            await this.axios.get(`/GetClassPageHomeBanner?id=${id}`).then((res) => {
                this.hotBanner = res.banner;
            });
        },
        async gettodayHot() {
            await this.axios.get("/GetClassPageLayout?tabId=341").then((res) => {
                this.todayHot = res.layout.splice(1);
                this.todayHot = this.todayHot.filter((v) => {
                    if (v.type !== 5) {
                        return v;
                    }
                });
                this.gethotBanner(res.layout[0].id);
                this.getTypeThree();
                this.getTypeSeven();
                this.getTypeEight();
            });
        },
        async getTypeThree() {
            for (let i = 0; i < this.todayHot.length; i++) {
                if (this.todayHot[i].type == "3") {
                    this.typeThreeID.push(this.todayHot[i].id);
                    await this.axios
                        .get(
                            `GetClassPageSixComics?id=${this.todayHot[i].id}&pageNum=1&pageSize=6&isAll=0`
                        )
                        .then((res) => {
                            this.typeThree.push(res.roll_six_comics);
                        });
                }
            }
        },
        async getTypeSeven() {
            for (let i = 0; i < this.todayHot.length; i++) {
                if (this.todayHot[i].type == "7") {
                    await this.axios
                        .get(`GetClassPageComicsRank?id=${this.todayHot[i].id}`)
                        .then((res) => {
                            this.typeSeven.push(res.rank);
                        });
                }
            }
        },
        async getTypeEight() {
            for (let i = 0; i < this.todayHot.length; i++) {
                if (this.todayHot[i].type == "8") {
                    await this.axios
                        .get(`GetClassPageHighEnergyEp?id=${this.todayHot[i].id}`)
                        .then((res) => {
                            this.typeEight = res.eps;
                            this.ismore = true;
                        });
                }
            }
        },
        async getSearchSwipe() {
            await this.axios.get("SearchRecommend").then((res) => {
                this.SearchSwipe = res;
                this.currentSwipe = this.SearchSwipe[0].title;
                this.season_id = this.SearchSwipe[0].season_id;
            });
        },
        //换一换
        change(index) {
            let pageNum = Math.floor(Math.random() * 15 + 1);
            this.pageNum = pageNum;
            if (this.pageNum == pageNum) {
                pageNum = Math.floor(Math.random() * 15 + 1);
            }
            this.typeThree[index] = [];
            this.loading = true;
            this.axios
                .get(
                    `GetClassPageSixComics?id=${this.typeThreeID[index]}&pageNum=${pageNum}&pageSize=6&isAll=0`
                )
                .then((res) => {
                    this.typeThree[index] = res.roll_six_comics;
                    this.loading = false;
                });
        },
        //重新刷新整个页面
        refresh() {
            this.hotBanner = [];
            this.todayHot = [];
            this.getbannerlist();
            this.gethotBanner();
            this.gettodayHot();
        },
        //获取焦点 跳转搜索页面
        focus() {
            router.push({
                path: "/search",
                query: {
                    currentSwipe: this.currentSwipe,
                    season_id: this.season_id,
                },
            });
        },
        //轮播文字改变
        placeChange(e) {
            this.currentSwipe = this.SearchSwipe[e].title;
            this.season_id = this.SearchSwipe[e].season_id;
        },
    },
};
</script>

<style lang="scss" scoped>
.home {
    position: relative;
    .swipe {
        padding: 16px;
        height: 171.5px;
        .my-swipe {
            border-radius: 5px;
            overflow: hidden;
            img {
                width: 100%;
            }
        }
    }
    .top_nav {
        .search {
            overflow: hidden;
            position: relative;
            .my-swipe {
                position: absolute;
                top: 18px;
                left: 50px;
                font-size: 12px;
                color: #999;
            }
        }
        .hot {
            margin-bottom: 45px;
            .typeThree {
                margin: 20px 15px;
                height: 75vh;
                position: relative;
                .title {
                    display: flex;
                    justify-content: space-between;
                    align-content: center;
                    h2 {
                        font-weight: bold;
                        font-size: 18px;
                    }
                    p {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.5);
                    }
                }
                .loading {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 35vh;
                }
                .more {
                    position: absolute;
                    text-align: center;
                    margin: auto;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    padding: 10px 0;
                    border-radius: 30px;
                    width: 70%;
                    font-weight: bold;
                    opacity: 0.5;
                    background-color: #f0f0f0;
                }
            }
            .typeSeven {
                height: 115vh;
                margin: 20px 15px;
                position: relative;
                .title {
                    display: flex;
                    justify-content: space-between;
                    align-content: center;
                    h2 {
                        font-weight: bold;
                        font-size: 18px;
                    }
                    p {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.5);
                    }
                }
                .loading {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 35vh;
                }
            }
            .typeEight {
                overflow: auto;
                background: #2183de;
                h2 {
                    padding: 10px 10px;
                    color: #fff;
                    font-size: 18px;
                }
                .swiper_info {
                    display: flex;
                    .img {
                        border-radius: 10px;
                        padding: 0 10px;
                        img {
                            width: 100%;
                        }

                        .content {
                            background: #fff;
                            padding: 10px;
                            position: relative;

                            .recommend {
                                position: absolute;
                                bottom: 95px;
                                left: 10px;
                                color: #fff;
                                opacity: 0.9;
                            }
                            h3 {
                                font-size: 15px;
                                font-weight: bold;
                                padding-bottom: 10px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                span {
                                    color: #999;
                                }
                                &::before {
                                    padding-left: 10px;
                                }
                            }
                            p {
                                display: inline-block;
                                color: #d4b190;
                                background: #fef4e3;
                                padding: 5px 10px;
                            }
                        }
                    }
                }
            }
        }
        .recommend {
            .nav {
                display: flex;
                justify-content: space-evenly;
                padding-bottom: 4px;
                img {
                    width: 20px;
                }
            }
        }
    }
    .swiper {
        text-align: center;
        margin-top: 20px;
    }
    .refresh {
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -100px;
        font-size: 24px;
        color: red;
    }
    .more {
        text-align: center;
        height: 30px;
        line-height: 30px;
        opacity: 0.8;
    }
}
</style>
